<template>
	<div>
		<!--创建学生对话框 -->
		<el-dialog title="创建学生" v-model="dialogVisible" :close-on-click-modal="false" @close="resetForm">
			<el-form :model="form" :rules="rules" ref="createForm">
				<el-form-item label="姓名" prop="name" label-width="80px">
					<el-input v-model="form.name" placeholder="请输入姓名"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email" label-width="80px">
					<el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
				</el-form-item>
				<el-form-item label="手机号码" prop="mobile" label-width="80px">
					<el-input v-model="form.mobile" placeholder="请输入手机号码"></el-input>
				</el-form-item>
				<el-form-item label="民族" prop="nation" label-width="80px">
					<el-select placeholder="请选择民族" v-model="form.nation">
						<el-option v-for="nation in nations" size="large" :key="nation" :value="nation" :label="nation"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="政治面貌" prop="polit" label-width="80px">
					<el-select placeholder="请选择政治面貌" v-model="form.polit">
						<el-option v-for="(polit,index) in polities" size="large" :key="index" :value="polit" :label="polit"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="性别" label-width="80px">
					<el-radio-group v-model="form.sex">
						<el-radio-button label="男" value="1" />
						<el-radio-button label="女" value="2" />
					</el-radio-group>
				</el-form-item>
				<el-form-item label="出生日期" label-width="80px">
					<el-date-picker type="date"  placeholder="选择出生日期" size="large" v-model="form.birthday"></el-date-picker>
				</el-form-item>
			</el-form>
			<span class="dialog-footer">
				<el-button @click="resetForm">重填</el-button>
				<el-button type="primary" @click="submitForm">创建</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script setup>
import {ElMessage}  from 'element-plus';
	import {
		reactive,
		toRefs,
		ref
	} from 'vue';
	import {
		nations,
		polities
	} from '@/config/index.js';
	const data = reactive({
		dialogVisible: false, // 控制对话框的显示状态
		//表单字段
		form: {
			name: '',
			email: '',
			nation: '汉族',
			polit: '',
			sex: '1',
			birthday: '',
			mobile: ''
		},
		//验证规则
		rules: {
			name: [{
				required: true,
				message: '请输入姓名',
				trigger: 'blur'
			}],
			email: [{
					required: true,
					message: '请输入邮箱',
					trigger: 'blur'
				},
				{
					type: 'email',
					message: '请输入有效的邮箱地址',
					trigger: 'blur'
				}
			],
			nation: [{
				required: true,
				message: '请选择民族'
			}],
			polit: [{
				required: true,
				message: '请选择政治面貌'
			}],
			mobile: [{
					required: true,
					message: '请输入手机号',
					trigger: 'blur'
				},
				{
					// 使用正则表达式验证手机号格式
					pattern: /1[3-9]\d{9}$/,
					message: '手机号格式不正确',
					trigger: 'blur'
				}
			]
		}
	});
	//创建学生表单组件实例
	let createForm = ref(null);
	let {
		dialogVisible,
		form,
		rules
	} = toRefs(data);
	//提交form表单
	const submitForm = () => {
		createForm.value.validate((valid) => {
			if (valid) {
				ElMessage({message:'创建成功', type: 'success',});
				data.dialogVisible = false; // 关闭对话框
				// 这里可以添加提交表单到后台的逻辑
				console.info(data.form)
			} else {
				console.log('表单验证失败!');
				return false;
			}
		});
	};

	//重置表单
	const resetForm = () => {
		createForm.value.resetFields();
	};
	//暴露dialogVisible,父组件可以直接使用
	defineExpose({
	  dialogVisible,
	  form,
	});
</script>


<style scoped>
	/* 样式可以根据需要自定义 */
</style>